<style include="mwb-element-shared-style">
  :host {
    color: var(--cr-primary-text-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    width: 100%;
  }

  header {
    border-bottom: solid 1px var(--google-grey-300);
    display: flex;
    padding-block-start: 4px;
  }

  @media (prefers-color-scheme: dark) {
    header {
      border-bottom: solid 1px var(--google-grey-700);
    }
  }

  cr-tabs {
    --cr-tabs-height: 40px;
    --cr-tabs-font-size: 13px;
    --cr-tabs-selected-tab-focused-font-weight: auto;
    --cr-tabs-focus-outline: solid 2px var(--mwb-icon-button-focus-ring-color);
    cursor: default;
    flex: 1;
  }

  #closeButtonContainer {
    align-items: center;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 48px;
  }

  #closeButton {
    --cr-icon-button-size: 28px;
    --cr-icon-button-icon-size: 18px;
    margin: 0;
  }

  #content {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 0;
  }
</style>

<header>
  <cr-tabs
      tab-names="[[getTabNames_(tabs_)]]"
      selected="{{selectedTab_}}"
      on-selected-changed="onSelectedTabChanged_">
  </cr-tabs>
  <div id="closeButtonContainer">
    <cr-icon-button
        id="closeButton" iron-icon="cr:close" on-click="onCloseClick_"
        title="$i18n{tooltipClose}" aria-label="$i18n{tooltipClose}">
    </cr-icon-button>
  </div>
</header>

<div id="content">
  <iron-pages selected="[[selectedTab_]]">
    <div>
      <template is="dom-if" if="[[isSelectedTab_(selectedTab_, 0)]]">
        <read-later-app side-panel></read-later-app>
      </template>
    </div>
    <div>
      <template is="dom-if" if="[[isSelectedTab_(selectedTab_, 1)]]">
        <bookmarks-list></bookmarks-list>
      </template>
    </div>
    <div>
      <template is="dom-if" if="[[isSelectedTab_(selectedTab_, 2)]]">
        <reader-mode-app></reader-mode-app>
      </template>
    </div>
  </iron-pages>
</div>
